<template>
  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
    <n-loading-bar-provider>
      <n-dialog-provider>
        <n-message-provider>
          <div>
            <router-view></router-view>
            <footer v-if="isShow">
              <ul ref="refFooter" class="footer-container">
                <li @click="activeHander('home', 0)"><i :class="['iconfont', 'icon-shouye-copy']"></i></li>
                <li @click="activeHander('feidianshipin', 1)"><i
                    :class="['iconfont', 'icon-icon_24pt_feidianshipin_jihuo']"></i>
                </li>
                <li @click="activate()"><i :class="['iconfont', 'icon-tianjia-copy']"></i></li>
                <li @click="activeHander('message', 3)"><n-badge :value="counts">
                    <i :class="['iconfont', 'icon-xiaoxi']"></i>
                  </n-badge></li>
                <li @click="activeHander('my', 4)"><i :class="['iconfont', 'icon-wode']"></i></li>
              </ul>
            </footer>
            <n-drawer height="100%" v-model:show="activeRef" width="100%" :placement="'bottom'" resizable>
              <n-drawer-content>
                <template #header>
                  <ul class="header-from">
                    <li @click="handleClose"><i class="iconfont icon-guanbi"></i></li>
                    <li>创作</li>
                    <li>
                      <n-button @click="publish" strong secondary round type="primary"> 发布</n-button>
                    </li>
                  </ul>
                </template>
                <template #default>
                  <n-spin :show="loading">
                    <n-input style="font-size: 20px;" v-model:value="titleValue" type="text" placeholder="输入标题开始记录✨" />
                    <noteForm ref="RefNoteForm" class="mt-10" />
                  </n-spin>
                </template>
              </n-drawer-content>
            </n-drawer>
          </div>
        </n-message-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>
<script setup lang="ts">

import bus from '@/utils/mitt';
import noteForm from '@/components/noteForm/index.vue';
import { zhCN, dateZhCN, NConfigProvider } from 'naive-ui'
import { createBasicFrom } from '@/apis/index';
import { uploadImages } from '@/apis/index';
import { init, handleConnect, close } from '@/utils/socket';
import { useMain } from '@/store/index';
import { useDark } from '@vueuse/core';
useDark();
init();
const store = useMain();
let counts = computed(() => store.obtainOnline);
const isShow = computed(() => store.obtainIsShwoMenu)
const router = useRouter();
const refFooter = ref();
const RefNoteForm = ref();
const titleValue = ref('');
const activeRef = ref(false);
const loading = ref(false);
function activate() {
  activeRef.value = true;
}

function handleClose() {
  activeRef.value = false;
}


async function publish() {
  if (titleValue.value === '') {
    return;
  }
  loading.value = true;
  RefNoteForm.value.form.title = titleValue.value;
  RefNoteForm.value.form.username = localStorage.getItem('username') ?? '侠客';
  // 需优化
  await uploadImages(RefNoteForm.value.files).then((res: any) => {
    RefNoteForm.value.form.imageUrl = res.data?.imageUrl ?? '';
    createBasicFrom(RefNoteForm.value.form).then((res: any) => {
      if (res.status === 200) {
        RefNoteForm.value.files = {};
        handleClose();
        titleValue.value = '';
        loading.value = false;
        location.reload();
      }

    })
  })

}
function activeHander(type: string, index: number) {
  const node = document.querySelectorAll('.footer-container i')
  for (let i = 0; i < node.length; i++) {
    node.forEach((item: any) => {
      item.classList.remove('active');
    })
    node[index].classList.add('active');
  }

  switch (type) {
    case 'home':
      router.push('/')
      break;
    case 'feidianshipin':
      router.push({ path: '/hotspot' })
      break;
    case 'message':
      router.push('/message')
      setTimeout(() => {
        location.reload();
      }, 300)
      break;
    case 'my':
      router.push('/person')
      break;
    default:
      break;
  }
}

let currentCount = ref(0);
onMounted(() => {
  handleConnect();
  bus.on('userCount', (user: any) => {
    setTimeout(() => {
      if (store.obtainToken !== null) {
        currentCount.value = user.currrentUserNum;
      } else {
        currentCount.value = 0;
      }
      store.setSystemMessage(user);
      store.insertOnlinerCount(currentCount.value)
    }, 0)
  })
  window.addEventListener('beforeunload', close)
  bus.on("scrollTo-height", (params: any) => {
    if (!params.child) {
      refFooter.value.style.bottom = '0px'
      return;
    }
    else if (params.val > 200) {
      refFooter.value.style.bottom = '-60px'
    } else {
      refFooter.value.style.bottom = '0px'
    }
  })

})

onUnmounted(() => {
  window.removeEventListener('beforeunload', close)
})

</script>


<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 30px;
  padding-bottom: 60px;
  height: 100%;

}

::v-deep .n-drawer-header {
  overflow: hidden;
  display: block !important;
  padding: 0px 0px !important;
}



.header-from {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: relative;


  li {
    font-size: 16px;
    line-height: 50px;
  }

  li:nth-child(1) {
    width: 40px;
  }

  li:nth-child(2) {
    flex: 1;
    text-align: center;
  }

  li:nth-child(3) {
    width: 90px;
  }








}

.footer-container {
  width: 100%;
  height: 50px;
  background-color: #f6f7f9;
  position: fixed;
  z-index: 999;
  bottom: -0.5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: all 0.5s;

  li {
    width: 20px;
  }

  i {
    font-size: 20px;

  }
}

.active {
  font-size: 30px !important;
}
</style>
